<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>留言板</title>

    <!--固定框架-->
    <link rel='stylesheet' href='../css/bootstrap.min.css'>

    <!--图标库-->
    <link rel='stylesheet' href='../css/material-design-iconic-font.min.css'>

    <!--核心样式-->
    <link rel="stylesheet" href="../css/personal_page_style.css">

    <link rel="stylesheet" href="../css/communication.css">

    <link rel="javascript" href="../js/communication.js">
    <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <div id="viewport">

        <!-- Sidebar -->
        <div id="sidebar">
            <header>
                <a href="#">个人中心</a>
            </header>
            <ul class="nav">

                <li>
                    <img src="../images/1.jpg" alt="" />
                    <span>欢迎您! 管理员</span>
                </li>

                <li>
                    <a href="../myweb/personal_page.html">
                        <i class="zmdi zmdi-view-dashboard"></i> 返回首页
                    </a>
                </li>
                <li>
                    <a href="../myweb/shopping.html">
                        <i class="zmdi zmdi-link"></i> 商城购物
                    </a>
                </li>
                <li>
                    <a href="../myweb/student_information.html">
                        <i class="zmdi zmdi-widgets"></i> 宿舍信息
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="zmdi zmdi-calendar"></i> 宿舍费用查询与缴纳
                    </a>
                </li>

                <li>
                    <a href="../myweb/personal_page_communication.html">
                        <i class="zmdi zmdi-settings"></i> 留言板
                    </a>
                </li>
                <li>
                    <a href="../myweb/worker.html">
                        <i class="zmdi zmdi-comment-more"></i> 联系我们
                    </a>
                </li>
            </ul>





        </div>

        <!-- Content -->
        <div id="content">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#"><i class="zmdi zmdi-notifications text-danger"></i></a>
                        </li>
                        <li><a href="#">账户退出</a></li>
                    </ul>

                </div>
            </nav>
            <div class="container-fluid">
                <div class="wrap">
                    <div class="says">
                        <h1>来，请留下你想要对公寓管理员的谏言</h1>
                        <textarea>请点击发布试试吧</textarea><input type="button" value="发布">
                        <div class="errmsg">请填写内容后再发布！</div>
                    </div>
                    <ul>

                    </ul>
                    <script>
                        window.onload = function() {
                            var oWrap = document.getElementsByClassName("wrap")[0];
                            var oTextarea = oWrap.getElementsByTagName("textarea")[0];
                            var oBtn = oWrap.getElementsByTagName("input")[0];
                            var oUl = oWrap.getElementsByTagName("ul")[0];
                            var errMsg = oWrap.getElementsByClassName("errmsg")[0];
                            var oA = document.getElementsByTagName("a");
                            //console.log(oA);
                            var t = new Date();
                            var Year = t.getFullYear();
                            var Month = t.getMonth() + 1;
                            var Day = t.getDate();
                            var Hours = t.getHours();
                            var Minutes = t.getMinutes();
                            var Scondes = t.getSeconds();
                            var timers = toString(Year) + "年" + toString(Month) + "月" + toString(Day) + "日" + toString(Hours) + ":" + toString(Minutes) + ":" + toString(Scondes); //将获取到的日期对象拼接。
                            //console.log(timers);

                            function toString(n) //数字转字符串
                            {
                                if (n < 9) {
                                    n = "0" + n;
                                } else {
                                    n = "" + n;
                                }
                                return n;
                            };

                            oBtn.onclick = function() {
                                if (oTextarea.value == "") {
                                    startMove(errMsg, {
                                        opacity: 100
                                    });
                                    //console.log(errMsg.style.opacity)
                                    oTextarea.select();
                                } else {
                                    var aLi = document.createElement("li");
                                    var aSpan = document.createElement("span");
                                    //console.log(aLi);
                                    //console.log(aSpan);
                                    //oUl.appendChild(aLi);
                                    //aLi.appendChild(aSpan);
                                    aLi.innerHTML = oTextarea.value;
                                    aSpan.innerHTML = timers + "<a href='javascript:;' title='删除这条信息'>删除</a>";
                                    //aSpan.innerHTML="<a href='javascript:;'>删除</a>"
                                    if (oUl.children.length > 0) {
                                        oUl.insertBefore(aLi, oUl.children[0]);
                                        aLi.appendChild(aSpan);
                                        oTextarea.value = "";
                                    } else {
                                        oUl.appendChild(aLi);
                                        aLi.appendChild(aSpan);
                                        oTextarea.value = "";
                                    };
                                    var aLiHeight = parseInt(getStyle(aLi, "height"));
                                    //console.log(aLiHeight);
                                    aLi.style.height = "0";
                                    startMove(aLi, {
                                        height: aLiHeight
                                    }, function() {
                                        startMove(aLi, {
                                            opacity: 100
                                        });
                                    });
                                    delLi(); //添加数据后加载删除模块	
                                }
                            };

                            function delLi() {
                                for (var i = 0; i < oA.length; i++) {
                                    oA[i].onclick = function() {
                                        liNode = this.parentNode.parentNode //获取到当前A标签的父节点，也就是LI
                                        var aLiHeight = parseInt(getStyle(liNode, "height")) + 1;
                                        //console.log(aLiHeight);
                                        //链式运动操作：先进行透明化，再进行高度变小，最后删除DOM元素
                                        startMove(liNode, {
                                            opacity: 0
                                        }, function() {
                                            startMove(liNode, {
                                                height: 0
                                            }, function() {
                                                oUl.removeChild(liNode);
                                            });
                                        });
                                    }
                                }
                            }
                        };

                        //运动框架
                        function startMove(obj, json, endFn) {
                            clearInterval(obj.timer);
                            obj.timer = setInterval(
                                function() {

                                    var iStop = true;
                                    for (var curr in json) {
                                        var oNumber = 0;
                                        if (curr == "opacity") {
                                            oNumber = Math.round(parseFloat(getStyle(obj, curr)) * 100);
                                        } else {
                                            oNumber = parseInt(getStyle(obj, curr));
                                        }
                                        var speed = (json[curr] - oNumber) / 6;
                                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                                        if (oNumber != json[curr])
                                            iStop = false;
                                        if (curr == "opacity") {
                                            obj.style.filter = "alpha(opacity:" + (oNumber + speed) + ")";
                                            obj.style.opacity = (oNumber + speed) / 100;
                                        } else {
                                            obj.style[curr] = oNumber + speed + "px";
                                        }
                                    };
                                    if (iStop) {
                                        clearInterval(obj.timer);
                                        if (endFn) endFn();
                                    }
                                }, 30);
                        };

                        //获取非行间样式
                        function getStyle(obj, name) {
                            if (obj.currentStyle) {
                                obj = currentStyle[name];
                            } else {
                                obj = getComputedStyle(obj, false)[name];
                            }
                            return obj;
                        };
                    </script>
                </div>





            </div>
        </div>

    </div>

</body>

</html>